import React, { useState } from "react";
import { Resizable } from "re-resizable";
import { Layout, Input, Tooltip, message } from 'antd';
import {
  DndContext,
  useSensor,
  useSensors,
  KeyboardSensor,
  PointerSensor,
  MouseSensor,
  TouchSensor
} from '@dnd-kit/core';
import DraggableItem from '@/components/Draggable';
import { Droppable } from '@/components/Droppable';
import styles from './Welcome.less'
import { ArrowLeftOutlined, EyeOutlined, UploadOutlined, EyeFilled, SwapRightOutlined, SwapLeftOutlined } from '@ant-design/icons'
import IconFont from '@/components/IconFont'
import { Atemp, Atempconfig } from "@/components/ATemp";
import Alayer from "@/components/Alayer";
import { useWindowSize } from '@/utils/windowsize';


const { Header, Footer, Sider, Content } = Layout,
  { TextArea } = Input,
  menulist = [
    {
      title: "文本",
      icon: "icon-type-text",
      fontSize: 20
    },
    {
      title: "图表",
      icon: "icon-bar_chart_",
      fontSize: 20
    },
    {
      title: "表格",
      icon: "icon-table",
      fontSize: 18
    },
    {
      title: "图片",
      icon: "icon-picture",
      fontSize: 22
    },
    {
      title: "图形",
      icon: "icon-shape-fill",
      fontSize: 22

    },
    {
      title: "模板",
      icon: "icon-template-f",
      fontSize: 18,
      index: 0,
      render: (setconfig, setlayer) => {
        return <Atemp setconfig={setconfig} setlayer={setlayer}></Atemp>
      },
      configrender: (config, setconfig) => {
        return <Atempconfig config={config} setconfig={setconfig}></Atempconfig>
      }
    },
  ];


const style = {
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  border: "solid 1px #ddd",
  background: "#f0f0f0",
};

const Welcome = () => {
  const [activeId, setActiveId] = useState(null);//当前拖拽的id
  const [resizing, setresizing] = useState(false);//缩放ing
  const [focus, setfocus] = useState("");//hover css
  const [config, setconfig] = useState({
  });//config
  const [collapsed, setcollapsed] = useState(false);//展开收起
  const [item, setitem] = useState(menulist[0]);//选中工具栏
  const [layer, setlayer] = useState(false);//图层展开收起
  const { width, height } = useWindowSize();//设备宽高

  function handleDragStart(event) {
    setActiveId(event.active.id);
  }

  function handleDragEnd({ over, active, delta }) {
    setActiveId(null);
    setconfig((config) => {
      let newconfig = JSON.parse(JSON.stringify(config));
      if (active.id && over?.id) {
        //新建id 并 配置基础位置信息
        let idstr = active.id;
        let prevx = newconfig?.x ?? (width - 380 - (layer ? 160 : 280) - (config.width)) / 2,
          prevy = newconfig?.y ?? 0;
        newconfig = {
          ...newconfig,
          id: idstr,
          x: resizing ? prevx : prevx + delta.x,
          y: resizing ? prevy : prevy + delta.y
        }
      }
      return newconfig
    })
  }


  const mouseSensor = useSensor(MouseSensor, {
    delay: 250,
    tolerance: 5,
  });

  const touchSensor = useSensor(TouchSensor, {
    delay: 250,
    tolerance: 5,
  });

  const keyboardSensor = useSensor(KeyboardSensor, {});

  const sensors = useSensors(mouseSensor, touchSensor, keyboardSensor);

  console.log(config);

  return (
    <DndContext sensors={sensors} style={{ height: "100%" }} onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
      <Layout style={{ height: "100%", minHeight: "100px", position: "absolute", width: "100%" }}>
        <Header style={{ padding: 0, backgroundColor: "#FFF", borderBottom: "1px solid #f0f0f0", height: 60 }}>
          <div className="center" style={{ justifyContent: "space-between", height: "100%" }}>
            <div className={styles.left}>
              <a style={{ fontSize: 16 }}>
                <ArrowLeftOutlined />
                <span>返回</span>
              </a>
              <img src={require("@/assets/logo_main.png")} alt="" />
            </div>
            <div className="center" style={{ flex: 1, fontSize: 16 }}>
              {config.title}
            </div>
            <div className={styles.right}>
              <a style={{ fontSize: 16 }}
                onMouseEnter={() => {
                  setfocus("PDF")
                }}
                onMouseLeave={() => {
                  setfocus("")
                }}>
                {
                  focus == "PDF" ? <EyeFilled /> : <EyeOutlined />
                }
                <span>预览</span>
              </a>
              <a style={{ fontSize: 16, backgroundColor: "#25bd64", color: "#fff" }}>
                <UploadOutlined />
                <span>导出PDF</span>
              </a>
            </div>

          </div>
        </Header>
        <Layout>
          <Sider
            theme="light"
            collapsed={collapsed}
            // onCollapse={() => {
            //   setcollapsed(!collapsed)
            // }}
            width={layer ? 240 : 360}
            style={{ position: "relative", overflow: "visible" }}
          >
            <div className={styles.menu}>
              {
                menulist.map((it, i) => {
                  return <div
                    key={i}
                    className={`${styles.menuitem} ${(item.title == it.title && !layer) ? styles.active : ''} ${(item.index - 1 == i && !collapsed && !layer) ? styles.preactive : ''}`}
                    onClick={() => {
                      setlayer(false);
                      setcollapsed(false);
                      setitem({
                        ...it,
                        index: i
                      })
                    }}>
                    <IconFont type={it.icon} style={{ fontSize: it.fontSize }}></IconFont>
                    <p>{it.title}</p>
                  </div>
                })
              }
              <div className={styles.menusub} style={{ borderTopRightRadius: collapsed ? 0 : item.index == menulist.length - 1 ? 8 : 0 }} onDoubleClick={() => {
                setcollapsed(!collapsed)
              }}>
                {
                  collapsed ?
                    <Tooltip title={"双击上方空白区域展开/收起"} placement="right">
                      <div className="center" onClick={() => {
                        setcollapsed(false)
                      }}>
                        <SwapRightOutlined />
                        展开
                      </div>
                    </Tooltip>
                    :
                    <Tooltip title={"双击上方空白区域展开/收起"} placement="right">
                      <div className="center" onClick={() => {
                        setcollapsed(true)
                      }}>
                        <SwapLeftOutlined />
                        收起
                      </div>
                    </Tooltip>

                }
              </div>
            </div>
            <div className={styles.menuextra} style={{ width: layer ? 160 : 280 }}>
              <div style={{ position: "absolute", width: "100%", height: "100%", left: layer ? -280 : 0, transition: "all 0.2s", overflow: "hidden" }}>
                {
                  item.render?.(setconfig, setlayer)
                }
              </div>
              <div style={{ position: "absolute", width: "100%", height: "100%", right: !layer ? -280 : 0, transition: "all 0.2s", overflow: "hidden" }}>
                <Alayer setconfig={setconfig} config={config}></Alayer>

              </div>
            </div>
            <div className={layer ? styles.alayeract : styles.alayer} onClick={() => {
              if (!config.id) {
                message.warn("请先添加您的模板!")
                return
              }
              console.log(config);
              setlayer(true)
              setcollapsed(false);
            }}>
              <IconFont type="icon-tuceng" style={{ fontSize: 20 }}></IconFont>
              <p>页面</p>
            </div>

            {/* 
            <p className="center bglight" style={{ padding: "12px 0", color: "#fff", textShadow: "1px 1px 1px #666" }}>组件库{activeId}</p>
            <DraggableItem id="text" drag={false}>
              文字组件
            </DraggableItem>

            <DragOverlay dropAnimation={false}>
              {activeId && activeId.indexOf("temp") == -1 ? (
                <button>
                  文字组件
                </button>
              ) : null}
            </DragOverlay> 
            */}


          </Sider>
          <Content style={{ overflow: "hidden", position: "relative" }}>
            <Droppable id="content">
              {
                config.id && <DraggableItem id={config.id} drag={!resizing} x={config.x ? config.x : (width - 380 - (layer ? 160 : 280) - (config.width)) / 2} y={config.y}>
                  <Resizable
                    style={style}
                    onResizeStart={() => {
                      setresizing(true)
                    }}
                    onResizeStop={() => {
                      setresizing(false)
                    }}
                    onResize={() => {
                      //cur尺寸
                    }}
                    size={{
                      width: config.width,
                      height: config.height,
                    }}
                  >
                    <div className={styles.box} style={{ backgroundColor: config.pages?.filter(it => it.active)[0]?.backgroundColor }}>
                      {
                        config.pages && config.pages?.filter(it => it.active)[0]?.id
                      }
                    </div>
                  </Resizable>
                </DraggableItem>
              }
            </Droppable>

            {
              item.configrender?.(config, setconfig)
            }
          </Content>
        </Layout>
      </Layout>



    </DndContext>
  );
};

export default Welcome;
